<template>
  <div class="JADP-common-layout">
    <div class="JADP-common-layout-center">
      <el-row class="JADP-common-search-box" :gutter="16">
        <el-form @submit.native.prevent>
          <el-col :span="6">
            <el-form-item label="班级名称">
              <el-input
                v-model="classname"
                placeholder="请输入"
                readonly
                @click.native.stop="choiceClazz"
              >
                <el-button
                  slot="append"
                  icon="el-icon-search"
                  @click.native.stop="choiceClazz"
                  >查询</el-button
                >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="考试标题">
              <el-select
                v-model="query.cpid"
                placeholder="请先选择班级在选择考试"
                clearable
                @change="paperListChange"
              >
                <el-option
                  v-for="(item, index) in paperList"
                  :key="index"
                  :value="item.id"
                  :label="item.examinationtitle"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" @click="search()"
                >查询</el-button
              >
              <el-button icon="el-icon-refresh-right" @click="reset()"
                >重置</el-button
              >
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>

      <div class="JADP-common-layout-main JADP-flex-main">
        <el-row class="JADP-common-page-header">
          <el-col :span="12">
            <h3>培训班：{{ classname }}</h3></el-col
          >
          <el-col :span="12">
            <div class="timer">培训时间：{{ trainingTime }}</div>
          </el-col>
        </el-row>
        <div class="title">
          <span
            >考试分类：<i v-if="form.papertype">{{
              getDict("shijuanleixing", form.papertype)
            }}</i></span
          >
          <span
            >总分：<i>{{ form.totalScore }}</i></span
          >
          <span
            >及格分：<i>{{ form.passinggrade }}</i></span
          >
          <span
            >考试人数：<i>{{ formData.personSize }}</i></span
          >
        </div>
        <ul class="statistics">
          <li style="border: 2px solid #2fbec5">
            <div class="text">实考人数</div>
            <div>
              <img src="@/assets/images/statistics/shikao.png" alt="" />
            </div>
            <div class="textNum">{{ formData.actualNumber }}</div>
          </li>
          <li style="border: 2px solid #ff7090">
            <div class="text">及格人数</div>
            <div>
              <img src="@/assets/images/statistics/jige.png" alt="" />
            </div>
            <div class="textNum">{{ formData.passedNumber }}</div>
          </li>
          <li style="border: 2px solid #669bc4">
            <div class="text">平均分</div>
            <div>
              <img src="@/assets/images/statistics/pingjun.png" alt="" />
            </div>
            <div class="textNum">{{ formData.averageScore }}</div>
          </li>
          <li style="border: 2px solid #fe8c86">
            <div class="text">最高分</div>
            <div>
              <img src="@/assets/images/statistics/zuigao.png" alt="" />
            </div>
            <div class="textNum">{{ formData.highestScore }}</div>
          </li>
          <li style="border: 2px solid #a068d3">
            <div class="text">最低分</div>
            <div>
              <img src="@/assets/images/statistics/zuidi.png" alt="" />
            </div>
            <div class="textNum">{{ formData.lowestScore }}</div>
          </li>
          <li style="border: 2px solid #fe8c86">
            <div class="text">最早交卷</div>
            <div>
              <img src="@/assets/images/statistics/zuichi.png" alt="" />
            </div>
            <div class="earliest">{{ formData.earliest }}</div>
          </li>
          <li style="border: 2px solid #ff7090">
            <div class="text">最迟交卷</div>
            <div>
              <img src="@/assets/images/statistics/zuizao.png" alt="" />
            </div>
            <div class="earliest">{{ formData.latest }}</div>
          </li>
          <li style="border: 2px solid #3f9eff">
            <div class="text">最长耗时</div>
            <div>
              <img src="@/assets/images/statistics/zuichang.png" alt="" />
            </div>
            <div class="textNum">{{ formData.longest | timer }}</div>
          </li>
          <li style="border: 2px solid #689bc4">
            <div class="text">最短耗时</div>
            <div>
              <img src="@/assets/images/statistics/zuiduan.png" alt="" />
            </div>
            <div class="textNum">{{ formData.shortest | timer }}</div>
          </li>
        </ul>
        <div class="tabs">
          <el-tabs v-model="activeName">
            <el-tab-pane label="人员分析" name="Personnel">
              <Personnel ref="personnel" :query="query" />
            </el-tab-pane>
            <el-tab-pane
              label="分数段分析"
              name="fraction"
              style="width: 100%; height: 100%"
            >
              <FractionalSegment
                ref="FractionalSegment"
                :query="query"
                :totalScore="form.totalScore"
              />
            </el-tab-pane>
            <el-tab-pane label="题目分析" name="subject">
              <Subject ref="Subject" :query="query" />
            </el-tab-pane>
            <el-tab-pane label="题型分析" name="questionType">
              <QuestionType ref="QuestionType" :query="query" />
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </div>
    <ClazzTable ref="clazzTable" @currentRow="currentRow" />
  </div>
</template>
<script>
import ClazzTable from "../components/clazzTable.vue";
import Personnel from "./Personnel.vue";
import QuestionType from "./questionType.vue";
import Subject from "./subject.vue";
import FractionalSegment from "./fractionalSegment.vue";
import request from "@/utils/request";
export default {
  name: "ExamStatistics",
  components: {
    ClazzTable,
    Personnel,
    QuestionType,
    Subject,
    FractionalSegment,
  },
  data() {
    return {
      query: {
        clazzid: "",
        cpid: "",
        organizeId: "",
      },
      classname: "",
      trainingTime: "", //培训时间
      activeName: "Personnel",
      formData: {
        actualNumber: undefined,
        passedNumber: undefined,
        averageScore: undefined,
        highestScore: undefined,
        lowestScore: undefined,
        earliest: undefined,
        latest: undefined,
        longest: undefined,
        shortest: undefined,
        personSize: undefined,
      },
      form: {},
      paperList: [], // 考试的列表
    };
  },
  watch: {
    classname(newval) {
      if (newval) {
        this.paperinit();
      }
    },
  },
  filters: {
    timer(val) {
      if (val === null || val === undefined) return;
      if (val < 60) {
        return val + "秒";
      } else if (val < 3600) {
        return (val / 60).toFixed(0) + "分" + (val % 60) + "秒";
      } else {
        return (
          (val / 3600).toFixed(0) +
          "时" +
          ((val - 3600) / 60).toFixed(0) +
          "分" +
          ((val - 3600) % 60) +
          "秒"
        );
      }
    },
  },
  methods: {
    initData() {
      this.query.organizeId = this.$store.getters.organizeId;

      request({
        url: "/api/statistics/StatisticsController/ExamTj",
        method: "get",
        data: this.query,
      }).then((res) => {
        console.log(res);
        this.formData = res.data;
      });
    },
    choiceClazz() {
      this.$refs.clazzTable.visible = true;
    },
    currentRow(val) {
      this.query.clazzid = val.id;
      this.classname = val.classname;
      this.trainingTime = val.traindate_start + " ~ " + val.traindate_end;
    },
    //请求获取考试列表
    paperinit() {
      request({
        url: `/api/clazzpaper/Xy_ks_clazz_paper/getlistByStatus/${this.query.clazzid}?organizeId=${this.$store.getters.organizeId}`,
        method: "get",
      }).then((res) => {
        this.paperList = res.data;
        console.log(this.paperList, 333);
      });
    },
    reset() {
      for (let key in this.query) {
        this.query[key] = undefined;
      }
      for (let i in this.formData) {
        this.formData[i] = 0;
      }
      for (let j in this.form) {
        this.form[j] = "";
      }
      this.classname = "";
      this.trainingTime = "";
      this.paperList = [];
      this.$refs.personnel.list = [];
      this.$refs.QuestionType.list = [];
      this.$refs.Subject.list = [];
      this.$refs.FractionalSegment.list = [];
    },
    search() {
      if (this.query.clazzid && this.query.cpid) {
        this.initData();
        this.$refs.personnel.initData();
        this.$refs.QuestionType.initData();
        this.$refs.Subject.initData();
      } else {
        this.$message.warning("请先选择班级和考试标题后在进行查询");
      }
    },
    //选择标题
    paperListChange(val) {
      let newArr = this.paperList.filter((item) => item.id == val);
      this.form = newArr[0];
    },
  },
};
</script>
<style scoped lang="scss">
li {
  list-style: none;
}
.title {
  padding: 10px;
  span {
    margin: 0 10px;
    i {
      color: #606266;
      font-style: normal;
    }
  }
}
.statistics {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  margin: 20px 0;
  li {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-direction: column;
    width: 130px;
    height: 130px;
    border: 2px solid #f8fcfd;
    border-radius: 5px;
    text-align: center;
    .earliest {
      font-size: 14px;
      height: 35px;
    }
    .textNum {
      padding-top: 10px;
      height: 35px;
    }
    .text {
      height: 35px;
    }
  }
}
.tabs {
  padding: 20px;
}
</style>
